<template>
  <common-card title="累计用户数" :value="usersTotal" class="total-users">
    <template #chart>
      <v-chart :option="getOption()"></v-chart>
    </template>
    <template #bottom>
      <div class="total-users-bottom">
        <div>日同比</div>
        <div class="number">{{userGrowthLastDay}}%</div>
        <div :class="userGrowthLastDay>0 ? 'increment' : 'decrement'"></div>

         <div class="right">月同比</div>
        <div class="number">{{userGrowthLastMonth}}%</div>
        <div :class="userGrowthLastMonth>0 ? 'increment' : 'decrement'"></div>
      </div>
    </template>
  </common-card>
</template>

<script>
/* 
"usersTotal": 1177965,
  "usersLastDay": 1000000,
  "usersLastMonth": 800000,
  "userGrowthLastDay": "17.70",
  "userGrowthLastMonth": "47.12",
*/
import {mapState} from 'vuex'
export default {
  name: 'TotalUsers',
  computed: {
    ...mapState({
      usersTotal: state => state.data.reportData.usersTotal,
      usersLastDay: state => state.data.reportData.usersLastDay,
      usersLastMonth: state => state.data.reportData.usersLastMonth,
      userGrowthLastDay: state => state.data.reportData.userGrowthLastDay,
      userGrowthLastMonth: state => state.data.reportData.userGrowthLastMonth,
    })
  },

  methods: {
    getOption () {
      return {
        xAxis: {
          show: false,
          type: 'value',
          min: 0,
          max: this.usersTotal, // 最大刻度值
        },

        yAxis: {
          show: false,
          type: 'category', // 指定y轴为类目轴
        },

        series: {
          name: '月增长量',
          type: 'bar',
          data: [this.usersTotal - this.usersLastMonth],
          barWidth: 15,
          showBackground: true, // 显示背景
          label: {
            show: true,
            formatter: '|',
            position: 'right'
          }
        },

        tooltip: {
          formatter (params) { // 指定要提示的内容
            console.log(params)
            const {seriesName, marker, value} = params
            return `${seriesName}<br>${marker} ${value}`
          }
        },

        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },

        color: '#9ACD32'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .total-users {
    .total-users-bottom {
      display: flex;
      .right {
        margin-left: 10px;
      }
    }
  }
</style>
